<template>
  <div>
    <el-scrollbar :max-height="$common.dialogMaxHeight">
      <el-form :model="params" label-width="auto" v-for="item in 5" :key="item">
        <el-form-item label="Activity name">
          <el-input v-model="params.userName" />
        </el-form-item>
        <el-form-item label="Activity zone">
          <el-select v-model="params.region" placeholder="please select your zone">
            <el-option label="Zone one" value="shanghai" />
            <el-option label="Zone two" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item label="Activity time">
          <el-col :span="11">
            <el-date-picker v-model="params.date1" type="date" placeholder="Pick a date" style="width: 100%" />
          </el-col>
          <el-col :span="2" class="text-center">
            <span class="text-gray-500">-</span>
          </el-col>
          <el-col :span="11">
            <el-time-picker v-model="params.date2" placeholder="Pick a time" style="width: 100%" />
          </el-col>
        </el-form-item>
        <el-form-item label="Instant delivery">
          <el-switch v-model="params.delivery" />
        </el-form-item>
        <el-form-item label="Activity type">
          <el-checkbox-group v-model="params.type">
            <el-checkbox value="Online activities" name="type">
              Online activities
            </el-checkbox>
            <el-checkbox value="Promotion activities" name="type">
              Promotion activities
            </el-checkbox>
            <el-checkbox value="Offline activities" name="type">
              Offline activities
            </el-checkbox>
            <el-checkbox value="Simple brand exposure" name="type">
              Simple brand exposure
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="Resources">
          <el-radio-group v-model="params.resource">
            <el-radio value="Sponsor">Sponsor</el-radio>
            <el-radio value="Venue">Venue</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-scrollbar>
    <div class="custom-dialog-footer">
      <el-button plain type="primary" @click="onCancel" v-prevent-reclick>取消</el-button>
      <el-button type="primary" @click="onSubmit" v-prevent-reclick>确定</el-button>
      <el-button type="danger" @click="onInnerDialog" v-prevent-reclick>打开内层对话框</el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
/** 全局引入 */
import { ref, reactive, watch, computed, onBeforeMount, onMounted, onUnmounted, inject, defineEmits, defineAsyncComponent } from "vue";
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'
const $common: any = inject('$common')
const $DialogBox: any = inject('$DialogBox')
const emits = defineEmits(['cancel', 'ok', 'buttons-ready'])
const dialogDemoInner = defineAsyncComponent(() =>
  import('../dialog/dialogDemoInner.vue')
)
/** props数据 */
const props = defineProps({
  params: {
    type: Object,
    default: {},
  },
})
/** 定义数据 */
console.log('props.params',props.params)
const params = reactive(props.params);
/** 侦听 */
/** 计算 */
/** 方法 */
const onSubmit = () => {
  const action = params;
  action.message = '对话框提交'
  emits('ok', action);
}
const onCancel = () => {
  emits('cancel');
}
const onInnerDialog = () => {
   $DialogBox({
    title: "对话框标题内层",
    compontent: dialogDemoInner,
    appendToBody: true,//内层对话框必须加这个
    params: params,
  }).then((res: any) => {
    console.log('对话框then-', res)
  }).catch((err: any) => {
    console.log('对话框catch-', err)
  })
}


/** 生命周期钩子 */
onBeforeMount(() => {
  console.log('挂载前-params:', props.params);
})
onMounted(() => {
  // console.log('挂载完成-params:', props.params);
})
onUnmounted(() => {
  // console.log('销毁完成');
})

</script>